<template>
    <div class="fullScreen bg-c-g tx-s-14 tx-c-222">
        <m-header :msg="'会员管理'"></m-header>
        <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
            <div class="flex-box bg-c-wh padd-bt">
                <div class="flex-box flex-pc wd-50 bor-r-g">
                    <div class="iconSize-125 hygl_jrsy"></div>
                    <div class="mar-t-25 mar-l tx-c-r">今日收益：{{ data.todayInso }}</div>
                </div>
                <div class="line"></div>
                <div class="flex-box flex-pc wd-50">
                    <div class="iconSize-125 hygl_ljsy"></div>
                    <div class="mar-t-25 mar-l">累计收益：{{ data.allInso }}</div>
                </div>
            </div>
            <div class="bg-c-wh mar">
                <div class="flex-box flex-pj line-box bor-b-g" @click="openNext('/vipManage')"> 
                    <div>下级会员管理</div>
                    <div class="arrow_right mar-l"></div>
                </div>
                <div class="flex-box flex-pj line-box bor-b-g" @click="openNext('/vipRecord')"> 
                    <div>会员购彩记录</div>
                    <div class="arrow_right mar-l"></div>
                </div> 
                <div class="flex-box flex-pj line-box bor-b-g">我的赔率：{{ data.pl }}</div>
                <div class="flex-box flex-pj line-box bor-b-g" @click="openNext('/vipInvite')">
                    <div>邀请</div>
                    <div class="arrow_right mar-l"></div>
                </div>
            </div>
        </mescroll-vue>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import MescrollVue from 'mescroll.js/mescroll.vue'
import { isEmptyObject } from '../../common/js/common'
import { lowerIncome } from '../../common/js/axiosUtil' 
export default { 
    data() {
        return { 
            data : {
                allInso: '', todayInso: '', pl: ''
            },
            mescroll: null, // mescroll实例对象
            //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: { // 上拉加载的配置
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
                noMoreSize: 5 //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            }
        }
    },
    methods: {
        openNext (page) {
            this.$router.push( page ) 
        },
        // 获取会员管理收益数据
        getData(){
            let params = this.$params(1)
            lowerIncome(params)
            .then((response)=> { 
                if(response.data.code == "200"){
                    this.data = response.data.data
                } else {
                    this.$logAgain(response.data.msg)
                }
                // 隐藏下拉刷新状态;
                this.mescroll.endSuccess(1)
            })
            .catch((error)=> {
                // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                this.mescroll.endErr()
                this.$toast('请求服务失败', 2000)
            })
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll 
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback () {
            this.getData()
        }
    },
    components: {
        MHeader,
        MescrollVue
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .mar
        margin: .5rem 0
        padding: 0 .75rem
    .line-box
        padding: 1rem 0
        background: white
    .padd-bt
        padding : 1.5rem 0
    .mar-l
        margin-left: .75rem
    .hygl_jrsy
        background-image : url('../../common/image/hygl_jrsy.png')
    .hygl_ljsy
        background-image : url('../../common/image/hygl_ljsy.png')
</style>

